<!--  -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="48">
                    <a-col :md="16" :sm="24">
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item >
                            <a-button style="margin-right: 20px" type="primary" @click="getData()">查询</a-button>
                            <a-button icon="plus" @click="add()">新增</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>

         <a-table size="small" rowKey="id" :loading="isload" @change="handleTableChange" :columns="columns" :data-source="dataList" :pagination="{ pageSize: 10, total: total ,showSizeChanger: true,pageSize: size}"  >
            <template slot="makeLogo" slot-scope="text, record">
                <a-avatar shape="square" :size="50"  :src="record.makeLogo" />
            </template>
 
            <a-avatar  shape="square" :size="50" slot="makeBackground" slot-scope="makeBackground" :src="makeBackground" />
          <div slot="status" slot-scope="status">
                <a-switch checked-children="上架" un-checked-children="下架" disabled :checked="status == 1 ? true : false" />
            </div>
            <div  slot="cateId" slot-scope="cateId" >
                 <a-tag color="pink" v-for="item in classifyOneList" v-if="item.id==cateId" :key="item.id">
                    {{item.cateName}}
                 </a-tag>
            </div>
             <div  slot="isRecommend" slot-scope="isRecommend" >
                   <a-tag  :color="isRecommend=='1'?'#87d068':'#666'">
                     {{isRecommend=='1'?'是':'否'}}
                 </a-tag>
            </div>
            <template slot="operation" slot-scope="text, record">
                <div class="editable-row-operations">
                    <a-button type="link" @click="update(record)">修改</a-button>
                    <a-popconfirm
                        title="是否确认删除当前数据?"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="del(record)"
                    >
                        <a-button type="link">删除</a-button>
                    </a-popconfirm>
                </div>
            </template>
        </a-table>

        <!-- 添加、修改、删除个人推送消息 -->
        <a-modal
            title="添加、修改品牌"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="visible = false"
            >
            <div>
                <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 17 }">
                    <a-form-item label="品牌名称">
                        <a-input v-model="item.makeName" placeholder="请输入品牌名称" allow-clear></a-input>
                    </a-form-item>
                    <a-form-item label="品牌介绍">
                        <a-input v-model="item.makeIntroduction" type="textarea" placeholder="请输入品牌介绍" allow-clear></a-input>
                    </a-form-item>
                       <a-form-item label="分类名称">
                        <a-select v-model="item.cateId" style="width: 120px" >
                            <a-select-option v-for="(one,index) in classifyOneList" :key="one.id">
                                {{ one.cateName }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                      <a-form-item label="品牌logo">
                        <a-upload
                            name="avatar"
                            list-type="picture-card"
                            class="avatar-uploader"
                            :show-upload-list="false"
                            @change="handleChange($event,1)"
                        >
                            <img v-if="item.makeLogo"  style="width:140px;height:140px"  :src="item.makeLogo" alt="avatar" />
                            <div v-else>
                            <a-icon :type="loading ? 'loading' : 'plus'" />
                            <div class="ant-upload-text">
                                选择图片
                            </div>
                            </div>
                        </a-upload>
                    </a-form-item>
                     <a-form-item label="品牌介绍图">
                        <a-upload
                            name="avatar"
                            list-type="picture-card"
                            class="avatar-uploader"
                            :show-upload-list="false"
                            @change="handleChange($event,2)"
                        >
                            <img v-if="item.makeBackground"  style="width:140px;height:140px"  :src="item.makeBackground" alt="avatar" />
                            <div v-else>
                            <a-icon :type="loading ? 'loading' : 'plus'" />
                            <div class="ant-upload-text">
                                选择图片
                            </div>
                            </div>
                        </a-upload>
                    </a-form-item>
                     <a-form-item label="是否推荐">
                        <a-radio-group v-model="item.isRecommend" >
                            <a-radio  v-for="(item,i) in statusList" :key="i" :value="item.id">{{item.name}}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="状态">
                        <a-radio-group v-model="item.status" >
                            <a-radio  v-for="(item,i) in statusList" :key="i" :value="item.id">{{item.name}}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>

<script>
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
import { columns } from './table';
import { queryMake , updateMake } from '@/api/mall/make';
import { queryClassify  } from '@/api/mall/classify';
export default {
    data () {
        return {
            userId: undefined,
            brandId: this.global.brandId,
            brandList: [],
            isload: false,
            dataList: [],
            size: 10,
            page: 1,
            total: 0,
            columns,
            visible: false,
            confirmLoading: false,
            item: {
                id: "",
                name: '',
                makeName:"",
                makeIntroduction: '',
                cateId: '',
                isRecommend: '0',
                status: '1',
            },
            isAdd: true,
             statusList: [
                { id: '1', name: '是'},
                { id: '0', name: '否'},
            ],
            loading:false,
            classifyOneList:[]
        };
    },
    created(){
        this.getData()
    },
    methods: {
        getData(){
            let _this = this
            _this.isload = true
            const params = {
                'brandId':_this.brandId,
                 'size':_this.size,
                'page':_this.page - 1,
            }
            queryMake(params)
            .then(res=>{
                _this.isload = false
                if(res.success){
                    _this.dataList = res.data.content
                    _this.total = res.data.totalElements
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
         handleChange(info,type) {
             this.goods_file=info.fileList
             console.log(info,"info")
            if (info.file.status === 'uploading') {
                this.loading = true;
                return;
            }
             getBase64(info.file.originFileObj, imageUrl => {
                 if(type==1){
                      this.item.makeLogo = imageUrl;
                      this.item.logoFile=info.file.originFileObj
                 }else{
                    this.item.makeBackground = imageUrl;
                     this.item.backgroundFile=info.file.originFileObj

                 }
                this.loading = false;
                });
            },
         // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
         _queryClassify(parentId,type){
            let _this = this
            const params = {
                'parentId':parentId
            }
            queryClassify(params)
            .then(res=>{
                if(res.success){
                    if(type==0){
                        _this.classifyOneList=res.data.content
                    }
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 添加
        add(){
            this.isAdd = true
                this.item={
                    id: "",
                    name: '',
                    makeName:"",
                    makeIntroduction: '',
                    cateId: '',
                    isRecommend: '0',
                    status: '1',
                }
            this.visible = true
        },
        // 修改
        update(item){
            this.isAdd = false
            this.item = JSON.parse(JSON.stringify(item))
            this.item.cateId=Number(this.item.cateId)
            this.visible = true
        },
        // 确认添加、修改
        handleOk(){
            let _this = this

            if(_this.item.makeName == ''){
                _this.$message.warning('请输入品牌名称！');
                return
            }
              var formData = new FormData()
                formData.append('id',_this.item.id)
                formData.append('brandId',_this.brandId)
                formData.append('makeName',_this.item.makeName)
                formData.append('makeIntroduction',_this.item.makeIntroduction)
                formData.append('isRecommend',_this.item.isRecommend)
                formData.append('status',_this.item.status)
                formData.append('cateId',_this.item.cateId)
              if(_this.item.logoFile){
                   formData.append('logoFile',_this.item.logoFile)
              }
              if(_this.item.backgroundFile){
                   formData.append('backgroundFile',_this.item.backgroundFile)
              }
            updateMake(formData)
            .then(res=>{
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: _this.isAdd ? '添加成功' : '修改成功',
                        duration: 8,
                    })
                    _this.getData()
                    _this.visible = false
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 删除消息
        del(item){
            let _this = this
            var formData = new FormData()
            formData.append('id',item.id)
            formData.append('isDelete',1)
            updateMake(formData)
            .then(res=>{
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: '删除成功',
                        duration: 8,
                    })
                    _this.getData()
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
    }
}

</script>
<style scoped>

</style>